<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">UI</a></li>
        <li>Buttons</li>
    </ul>        
</div>

<div class="content">

    <div class="row-fluid">
        

        <div class="middle">

            <div class="button">
                <a href="#">
                    <span class="icomg-checkmark"></span>
                    <span class="text">With submenu</span>
                </a>
                <ul class="sub">
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-ok"></span></a></li>
                </ul>
            </div>

            <div class="button">
                <a href="#">
                    <span class="icomg-heart1"></span>
                    <span class="text">Only 4 items</span>
                </a>
                <ul class="sub">                        
                    <li><a href="#" class="tipb" title="title"><span class="icon-heart"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-heart"></span></a></li>
                    <li><a href="#" class="tipb" title="title"><span class="icon-heart"></span></a></li>                        
                    <li><a href="#" class="tipb" title="title"><span class="icon-heart"></span></a></li>
                </ul>
            </div>                  

            <div class="button tip" title="Button without submenu">
                <a href="#">
                    <span class="icomg-plus1"></span>
                    <span class="text">As button with link</span>
                </a>                    
            </div>
            
        </div>            
        
        <div class="middle">
            
            <div class="informer">
                <a href="#">
                    <span class="icomg-cog"></span>
                    <span class="text">Settings</span>
                </a>
            </div>

            <div class="informer">
                <a href="#">
                    <span class="icomg-stats-up"></span>
                    <span class="text">Statistic</span>
                </a>
            </div>

            <div class="informer">
                <a href="#">
                    <span class="icomg-comments3"></span>
                    <span class="text">Comments</span>
                </a>
            </div>                
            
            <div class="informer">
                <a href="#">
                    <span class="title">98%</span>
                    <span class="text">Free Disk space</span>
                </a>
            </div>                

            <div class="informer">
                <a href="#">
                    <span class="title">$2,534</span>
                    <span class="text">Balance</span>
                </a>
            </div>                
            
        </div>
        
    </div>        
    
    <div class="row-fluid">
        <div class="span6">
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-thumbsup"></i></div>
                    <h2>Buttons</h2>                        
                    <ul class="buttons">                            
                        <li><a href="#"><span class="icos-cog"></span></a></li>
                    </ul>
                </div>   
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span3">Default:</div>
                        <div class="span9">
                            <button class="btn" type="button">Default button</button>                                 
                            <button class="btn btn-primary" type="button">Primary button</button> 
                            <button class="btn btn-info" type="button">Info button</button>                          
                            <button class="btn btn-success" type="button">Success button</button> 
                            <button class="btn btn-warning" type="button">Warning button</button>                                
                            <button class="btn btn-danger" type="button">Danger button</button> 
                            <button class="btn btn-inverse" type="button">Inverse button</button>                                 
                            <button class="btn btn-link" type="button">Link button</button>   
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span3">Disabled:</div>
                        <div class="span9">                                
                            <button class="btn disabled" type="button">Default button</button>                                
                            <button class="btn disabled" type="button">Primary button</button>                                 
                        </div>
                    </div>                        
                    <div class="row-form">
                        <div class="span3">With icon:</div>
                        <div class="span9">
                            <button class="btn" type="button"><span class="icon-th"></span> Default button</button>
                            <button class="btn" type="button"><span class="icon-heart"></span> Primary button</button> 
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span3">Sizes:</div>
                        <div class="span9">                                
                            <button class="btn btn-large" type="button">Large button</button>
                            <button class="btn btn-large" type="button">Large button</button>                                
                            <br/>                                
                            <button class="btn" type="button">Default button</button>
                            <button class="btn" type="button">Default button</button>
                            <br/>                                
                            <button class="btn btn-small" type="button">Small button</button>
                            <button class="btn btn-small" type="button">Small button</button>
                            <br/>                                
                            <button class="btn btn-mini" type="button">Mini button</button>                                
                            <button class="btn btn-mini" type="button">Mini button</button>
                        </div>
                    </div>                        
                </div>                                         
                
            </div>                                         
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-star3"></i></div>
                    <h2>Bootstrap button plugins</h2>
                    <ul class="buttons">                            
                        <li>
                            <a href="#"><span class="icosg-arrow-down5"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>                          
                </div>                       
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span12">                                        
                            <span class="top title">Button dropdown:</span>
                            <div class="btn-group">
                                <button class="btn">Dropdown</button>
                                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>  
                            <div class="btn-group dropup">
                                <button class="btn">Dropup</button>
                                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>                                
                        </div>
                    </div>
                    <div class="row-form">
                        
                        <div class="span12">                                        
                            <span class="top title">Single toggle:</span>
                            <button type="button" class="btn" data-toggle="button">Press me to toggle</button>
                        </div>
                    </div>                     
                    <div class="row-form">                            
                        <div class="span12">                
                            <span class="top title">Button checkbox:</span>
                            <div class="btn-group" data-toggle="buttons-checkbox">
                                <button type="button" class="btn">Left</button>
                                <button type="button" class="btn">Middle</button>
                                <button type="button" class="btn">Right</button>
                            </div>
                            <div class="btn-group" data-toggle="buttons-checkbox">
                                <button type="button" class="btn"><span class="icon-download"></span></button>
                                <button type="button" class="btn"><span class="icon-upload"></span></button>                                    
                            </div>                                                                
                        </div>
                    </div>                                         
                    <div class="row-form">
                        <div class="span12">                                        
                            <span class="top title">Button radio:</span>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button type="button" class="btn">Left</button>
                                <button type="button" class="btn">Middle</button>
                                <button type="button" class="btn">Right</button>
                            </div>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button type="button" class="btn"><span class="icon-ok"></span></button>
                                <button type="button" class="btn"><span class="icon-remove"></span></button>                                    
                            </div>                                                                
                        </div>
                    </div>                                                             
                </div>
            </div>                  
            
        </div>
        <div class="span6">
            <div class="row-fluid">
                <div class="span6">                                                
                    <button class="btn btn-large btn-block" type="button">Block level button</button>
                    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>                        
                </div>
                <div class="span6">                        
                    <button class="btn btn-large btn-block btn-danger disabled" type="button">Block level button</button>                        
                    <button class="btn btn-large btn-block btn-warning disabled" type="button">Block level button</button>                        
                </div>
            </div>
            

            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-cube"></i></div>
                    <h2>Button groups</h2>
                    <ul class="buttons">
                        <li><a href="#"><span class="text">Button</span></a></li>
                        <li><a href="#"><span class="icosg-cog"></span></a></li>
                        <li><a href="#"><span class="icosg-star3"></span></a></li>
                    </ul>                        
                </div>                       
                <div class="block-fluid">
                    <div class="row-form">                            
                        <div class="span12">                                
                            <span class="top title">Single button group:</span>
                            <div class="btn-group">
                                <button class="btn"><span class="icon-home"></span></button>
                                <button class="btn"><span class="icon-star"></span></button>
                                <button class="btn"><span class="icon-ok"></span></button>
                                <button class="btn"><span class="icon-remove"></span></button>                                                                        
                            </div>
                        </div>
                    </div>                        
                    <div class="row-form">
                        <div class="span12">        
                            <span class="top title">Multiple button groups:</span>
                            <div class="btn-toolbar">
                                <div class="btn-group">
                                    <button class="btn"><span class="icon-star"></span></button>
                                    <button class="btn"><span class="icon-ok"></span></button>
                                    <button class="btn"><span class="icon-remove"></span></button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn"><span class="icon-home"></span></button>
                                    <button class="btn"><span class="icon-book"></span></button>
                                    <button class="btn"><span class="icon-pencil"></span></button>                                    
                                </div>
                            </div>
                        </div>
                    </div> 
                    <div class="row-form">
                        <div class="span9">                                        
                            <span class="top title">Multiple button groups:</span>
                            <div class="btn-group btn-group-vertical">
                                <button class="btn"><span class="icon-star"></span></button>
                                <button class="btn"><span class="icon-ok"></span></button>
                                <button class="btn btn-danger"><span class="icon-remove icon-white"></span></button>
                            </div>                                                                
                            <div class="btn-group btn-group-vertical">
                                <button class="btn"><span class="icon-home"></span></button>
                                <button class="btn"><span class="icon-book"></span></button>
                                <button class="btn btn-danger"><span class="icon-remove icon-white"></span></button>
                            </div>
                            <div class="btn-group btn-group-vertical">
                                <button class="btn"><span class="icon-align-left"></span></button>
                                <button class="btn"><span class="icon-align-center"></span></button>
                                <button class="btn btn-danger"><span class="icon-remove icon-white"></span></button>
                            </div>                                                                    
                        </div>
                    </div>                        
                                           
                </div>
            </div>
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star"></i></div>
                    <h2>Virgo rating</h2>
                    <div class="items">
                        <div class="rating" id="rate_id_1">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star active tip" title="2"></a>
                            <a href="#" class="star tip" title="3"></a>
                            <a href="#" class="star tip" title="4"></a>
                            <a href="#" class="star tip" title="5"></a>
                        </div>                                                         
                    </div>
                </div>                       
                <div class="block-fluid">
                    <div class="row-form">                            
                        <div class="span3">
                            <span class="top title">5 stars:</span>
                            <div class="rating" id="rate_id_1">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star tip" title="4"></a>
                                <a href="#" class="star tip" title="5"></a>
                            </div>                                
                            
                        </div>                            
                    </div>

                    <div class="row-form">                                                        
                        <div class="span12">                          
                            <span class="top title">10 stars:</span>
                            <div class="rating" id="rate_id_2" style="width: 180px;">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star active tip" title="4"></a>
                                <a href="#" class="star active tip" title="5"></a>
                                <a href="#" class="star active tip" title="6"></a>
                                <a href="#" class="star tip" title="7"></a>
                                <a href="#" class="star tip" title="8"></a>
                                <a href="#" class="star tip" title="9"></a>
                                <a href="#" class="star tip" title="10"></a>                                    
                            </div>                                                                
                        </div>                            
                    </div>                          
                    <div class="row-form">                                                        
                        <div class="span12">                          
                            <span class="top">Easy to use and integrate rating system. It's support any count of stars, return value on click.</span>
                        </div>                            
                    </div>                         
                </div>
            </div>                
        </div>            
    </div>                                        

    
    <div class="row-fluid">

        <div class="pagination pagination-centered pagination-mini">
            <ul>
                <li class="disabled"><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="disabled"><span>...</span></li>                    
                <li><a href="#">56</a></li>
                <li><a href="#">57</a></li>
                <li><a href="#">58</a></li>
                <li><a href="#">59</a></li>                    
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>             
        <div class="dr"><span></span></div>
        <div class="pagination pagination-centered pagination-small">
            <ul>
                <li class="disabled"><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="disabled"><span>...</span></li>                    
                <li><a href="#">56</a></li>
                <li><a href="#">57</a></li>
                <li><a href="#">58</a></li>
                <li><a href="#">59</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>              
        <div class="dr"><span></span></div>
        <div class="pagination pagination-centered">
            <ul>
                <li class="disabled"><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="disabled"><span>...</span></li>
                <li><a href="#">56</a></li>
                <li><a href="#">57</a></li>
                <li><a href="#">58</a></li>
                <li><a href="#">59</a></li>                    
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>                                    
        <div class="dr"><span></span></div>
        <div class="pagination pagination-centered pagination-large">
            <ul>
                <li class="disabled"><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="disabled"><span>...</span></li>
                <li><a href="#">56</a></li>
                <li><a href="#">57</a></li>
                <li><a href="#">58</a></li>
                <li><a href="#">59</a></li>                    
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>             
        
    </div>
    
</div>